import React from "react";
import { useEffect, useState } from "react";
import { useSearchParams, useNavigate } from "react-router-dom";
import { ResPlayList } from "../../../../api";
import "./PlayList.scss";
import MusicList from "./MusicList";
import PlayListCover from "./PlayListCover";
import Comment from "./Comment";
import Back from "../Components/Back";
import {useMySearchParams} from "../../../../hook/useMySearchParams";

export default function PlayList() {
  // let [searchParams, setSearchParams] = useSearchParams();
  const value = useMySearchParams('id')
  let navigate = useNavigate();
  // let value = searchParams.get("id")
  // let [params, setParams] = useState('');
  let [params, setParams] = useState(value);
  let [cover, setCover] = useState("");
  let [list, setList] = useState([]);

  useEffect(async () => {
    try {
      if (!localStorage.getItem("token")) {
        navigate("/login");
      } else {
        const {
          playlist,
          playlist: { tracks },
        } = await ResPlayList(params);
        // console.log(playlist);
        console.log(tracks);
        setCover(playlist);
        setList(tracks);
        // setParams(value);
      }
    } catch (error) {
      console.log(error);
    }
  }, []);

  return (
    <div id="pushMenuModule">
      {/* 返回按钮 */}
      <Back />

      {/* 歌单封面区域 */}
      <PlayListCover value={cover} />

      {/* 歌曲列表区域 */}
      <MusicList value={list} params={params} />

      {/* 评论区 */}
      <Comment />
    </div>
  );
}
